import React from 'react';
import { Progress, Tooltip } from 'antd';
import './EmotionAnalysis.css';

interface EmotionAnalysisProps {
  emotions: Record<string, number>;
}

const emotionColors: Record<string, string> = {
  joy: '#FFD700',     // 金色
  sadness: '#4169E1', // 蓝色
  anger: '#FF4500',   // 红色
  fear: '#800080',    // 紫色
  surprise: '#32CD32', // 绿色
  love: '#FF69B4'     // 粉色
};

const emotionLabels: Record<string, string> = {
  joy: '喜悦',
  sadness: '悲伤',
  anger: '愤怒',
  fear: '恐惧',
  surprise: '惊讶',
  love: '爱'
};

export const EmotionAnalysis: React.FC<EmotionAnalysisProps> = ({ emotions }) => {
  return (
    <div className="emotion-analysis">
      {Object.entries(emotions).map(([emotion, value]) => (
        <Tooltip
          key={emotion}
          title={`${emotionLabels[emotion]}: ${Math.round(value * 100)}%`}
        >
          <div className="emotion-bar">
            <span className="emotion-label">{emotionLabels[emotion]}</span>
            <Progress
              percent={value * 100}
              strokeColor={emotionColors[emotion]}
              showInfo={false}
              size="small"
            />
          </div>
        </Tooltip>
      ))}
    </div>
  );
}; 